<template>
	<view class="clientele">
		<NavBar title="我的客户" :isBack="true"></NavBar>
		<view class="content">
			<Search v-model="search" customPlaceholder="输入微信昵称 搜索"></Search>
			<div class="tabs">
				<Tabs :tabs="tabs" @change="handleTabsChange" @customDate="handleCustomDate" :active="active"></Tabs>
			</div>
			<view class="user-box">
				<view class="title">
					共<view class="num">{{ total }}</view>位客户
				</view>
				<up-empty mode="list" v-if="!usersTeamList.length"></up-empty>
				<view class="user-info">
					<view class="item" v-for="(item, index) in usersTeamList" :key="index">
						<image :src="item.wxavatar"></image>
						<view class="right-area">
							<view class="name">{{ item.wxname }}</view>
							<view class="row">
								<view>累计消费金额：</view>
								<view class="price">￥{{ item.user_paymoney }} 元</view>
							</view>
							<view class="row">
								<view>累计消费订单：</view>
								<view class="price">{{ item.user_order_num }} 笔</view>
							</view>
							<view class="date">
								最近下单时间：{{ timestampToTime(item.user_max_createtime) }}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import Tabs from '@/components/Tabs.vue';
import Search from '@/components/Search.vue';
import {
	usersTeam
} from '@/api/my.js'
import {
	timestampToTime
} from '@/common/index.js'
import {
	reactive,
	toRefs,
	onMounted
} from 'vue'
const state = reactive({
	total: 0,
	search: "",
	tabs: [{
		label: "全部",
		value: 1
	},
	{
		label: "今日",
		value: 2
	},
	{
		label: "昨日",
		value: 3
	},
	{
		label: "近七天",
		value: 4
	}, {
		label: "自定义",
		value: 5
	},
	],
	active: 1,
	usersTeamList: [],
	pageNum: 1
})

function handleTabsChange (item) {
	state.active = item.value
	if (state.active != 5) {
		getUsersTeamList()
	}
}
async function getUsersTeamList (starttime, overtime) {
	let params = {
		type: state.active,
		page: state.pageNum,
		starttime,
		overtime,
	}
	const res = await usersTeam(params)
	if (res.data.length) {
		state.usersTeamList = res.data
		state.total = res.data.per_page
	}
}

function handleCustomDate (startVal, endVal) {
	console.log(startVal, endVal)
	getUsersTeamList(startVal, endVal)
}

onMounted(() => {
	getUsersTeamList()
})
const {
	total,
	tabs,
	active,
	search,
	usersTeamList
} = toRefs(state)
</script>

<style lang="scss" scoped>
page {
	background: #FFFFFF;
}

.clientele {
	.content {
		padding: 36rpx;
		position: relative;
		z-index: 1;
		background: #FFFFFF;
		border-radius: 22rpx 22rpx 0rpx 0rpx;

		.tabs {
			margin: 39rpx 0rpx 59rpx;
		}

		:deep(.tabs) {
			width: 100%;
			display: flex;
			justify-content: space-between;

			.tab {
				font-size: 26rpx;
			}

			.active {
				font-size: 30rpx;
			}
		}

		.user-box {
			.title {
				display: flex;
				align-items: center;
				font-weight: bold;
				font-size: 30rpx;
				color: #333333;
				margin-bottom: 43rpx;

				.num {
					color: #58DBCF;
					margin: 0rpx 10rpx;
				}
			}

			.user-info {
				.item {
					display: flex;
					align-items: center;
					margin-bottom: 36rpx;

					image {
						width: 155rpx;
						height: 155rpx;
						border-radius: 50%;
						margin-right: 24rpx;
					}

					.right-area {
						.name {
							font-weight: bold;
							font-size: 28rpx;
							color: #333333;
							margin-bottom: 9rpx;
						}

						.row {
							display: flex;
							align-items: center;
							font-weight: 500;
							font-size: 22rpx;
							color: #999999;
							margin-bottom: 9rpx;

							.price {
								color: #333333;
							}
						}

						.date {
							font-weight: 500;
							font-size: 20rpx;
							color: #999999;
						}
					}
				}
			}
		}
	}
}
</style>